<template>
  <div>
    <el-table
      :data="paramList"
      style="width: 100%"
    >
      <el-table-column

        :label="$t('name')"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            :disabled="!scope.row.isAdd"
          />
        </template>
      </el-table-column>
      <el-table-column

        :label="$t('value')"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.value"
            :disabled="!scope.row.isAdd"
          />
        </template>
      </el-table-column>
      <el-table-column

        width="180"
      >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addParam">{{ $t('add') }}</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isAdd"
            type="text"
            icon="el-icon-edit"
            @click="dictionaries(scope.row)"
          >{{ $t('dictionaries') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="addOrUpdateParameter(scope.row)"
          >{{ $t('save') }}</el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="delParameter(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="param.value"
      :visible.sync="dialogDictionariesVisible"
      append-to-body
    >
      <dictionaries-model v-if="dialogDictionariesVisible" :product-id="productId" template-type="settingParam" :key-name="keyName+'_'+param.value" />
    </el-dialog>

  </div>
</template>

<script>
import DictionariesModel from '../DictionariesModel'
import {
  listProductTemplateSettingParam,
  updateProductTemplateSettingParam,
  insertProductTemplateSettingParam,
  deleteProductTemplateSettingParam
} from '@/api/iot/iotProductTemplateSettingParamApi'
import {
  successNotice,
  failureNotice,
  cancelNotice
} from '@/util/common'
export default {
  name: 'TemplateSettingParam',
  components: {
    DictionariesModel
  },
  props: {
    productId: {
      type: Number,
      default: null
    },
    templateId: {
      type: Number,
      default: null
    },
    keyName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      paramList: [],
      dialogDictionariesVisible: false,
      param: {}
    }
  }, created() {
    this.listProductTemplateSettingParam()
  }, methods: {
    dictionaries(item) {
      this.param = item
      this.dialogDictionariesVisible = true
    },
    listProductTemplateSettingParam() {
      listProductTemplateSettingParam({
        templateId: this.templateId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.paramList = data
        } else {
          this.paramList = []
        }
      })
    },
    addOrUpdateParameter(item) {
      if (item.value == null || item.value === '') {
        failureNotice(this, '命令参数不能为空')

        return
      }
      if (item.name == null || item.name === '') {
        failureNotice(this, '命令参数名不能为空')
        return
      }
      const json = {
        templateId: this.templateId,
        name: item.name,
        value: item.value
      }
      if (item.isAdd) {
        insertProductTemplateSettingParam(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listProductTemplateSettingParam()
        })
      } else {
        json.templateParamId = item.templateParamId
        updateProductTemplateSettingParam(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listProductTemplateSettingParam()
        })
      }
    },
    delParameter(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteProductTemplateSettingParam({
            templateParamId: item.templateParamId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listProductTemplateSettingParam()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    addParam() {
      for (let i = 0, j = this.paramList.length; i < j; i++) {
        if (this.paramList[i].isAdd) {
          return
        }
      }
      const item = {
        value: '',
        name: '',
        isAdd: true
      }
      this.paramList.push(item)
    }
  }
}
</script>


